<template>
  <div class="main">
    <h1 class="post_title">{{ article.title }}</h1>
    <div class="post_info">
      <span><i class="el-icon-time"/> {{ article.publishTime }}</span>
      <el-divider direction="vertical"></el-divider>
      <span><i class="el-icon-user-solid"/> {{ article.author }}</span>
      <el-divider direction="vertical"></el-divider>
      <span><i class="el-icon-view"/> {{ article.views }}</span>
    </div>
    <el-divider></el-divider>
    <div class="post_body" v-html="article.content">
    </div>
  </div>
</template>

<script>
import { articleDetail, articleAddViews} from "../../api/Mange/Mange";

export default {
  name: "detail",
  data() {
    return {
      articleId: '',
      article: {},
    }
  },
  created() {
    this.articleId = this.$route.params.id;
    this.getArticle();
  },
  methods: {
    getArticle() {
      articleDetail(this.articleId).then(res => {
        this.article = res.data;
      });
    },
  }
}
</script>

<style scoped lang="less">
.main {
  margin: 0 auto;
  padding-top: 20px;
  padding-left: 50px;
  padding-right: 50px;
  background-color: #0e092b;
  color: #eee;
  .post_title {
    font: 700 38px/48px MicrosoftYaHei Bold,MicrosoftYaHei,Arial,Hiragino Sans GB,STHeiti,Helvetica Neue,Helvetica,Microsoft Yahei,WenQuanYi Micro Hei,sans-serif;
  }
  .post_info {
    margin-top: 18px;
    font: 14px/1 Arial,Hiragino Sans GB,STHeiti,Helvetica Neue,Helvetica,Microsoft Yahei,WenQuanYi Micro Hei,sans-serif;
    color: #ccc;
    text-align: right;
  }
  .post_body {
    font: 18px/34px Arial,Hiragino Sans GB,STHeiti,Helvetica Neue,Helvetica,Microsoft Yahei,WenQuanYi Micro Hei,sans-serif;
    word-break: break-word;
  }
}
</style>
